<template>
  <!-- 页面容器：宽度750px，垂直居中 -->
  <view class="flex flex-col h-screen">
    <!-- 顶部导航栏：收藏标题 + 搜索框 -->
    <view class="flex items-center justify-between px-4 py-2 border-b border-gray-200">
      <!-- 收藏标题 -->
      <text class="text-[32px] font-medium">收藏 (2)</text>
      <!-- 搜索框：图标 + 输入框 -->
      <view class="flex items-center border border-gray-300 rounded-md px-2 py-1">
        <image 
          src="/images/search-icon.png" 
          class="w-6 h-6 mr-2"
          alt="搜索图标"
        />
        <input 
          type="text" 
          placeholder="搜索" 
          class="flex-1 outline-none"
        />
      </view>
    </view>

    <!-- 卡片容器：白色背景 + 圆角 + 最大宽度750px -->
    <view class="flex flex-col mx-auto mt-4 w-full max-w-[750px] bg-white rounded-xl shadow-sm">
      <!-- 卡片头部：头像 + 信息 + 收藏星标 -->
      <view class="flex items-center p-4">
        <!-- 头像（蓝色线条画） -->
        <image 
          src="/images/avatar.png" 
          class="w-24 h-24 rounded-full mr-4"
          alt="用户头像"
        />
        <!-- 个人信息区域 -->
        <view class="flex-1">
          <!-- 昵称 -->
          <text class="text-[36px] font-bold">A1307</text>
          <!-- 性别 + 年龄 + 身高 + 体重 + 婚姻状态 -->
          <view class="flex items-center mt-1">
            <image 
              src="/images/male-icon.png" 
              class="w-4 h-4 mr-1 text-blue-500"
              alt="性别图标"
            />
            <text class="text-[28px]">40</text>
            <text class="text-[28px] mx-2">176cm</text>
            <text class="text-[28px]">150kg</text>
            <text class="text-[28px] ml-2">离异带娃</text>
          </view>
          <!-- 工作地 -->
          <view class="mt-2 flex">
            <text class="text-[28px]">工作地:广东省/中山市/中山市/小榄镇</text>
          </view>
          <!-- 户籍地 + 收入 -->
          <view class="mt-1 flex">
            <text class="text-[28px]">户籍地:广西壮族自治区</text>
            <text class="text-[28px] ml-4">收入6000~6000</text>
          </view>
        </view>
        <!-- 收藏星标（粉色） -->
        <image 
          src="/images/star-icon.png" 
          class="w-6 h-6 text-pink-500"
          alt="收藏星标"
        />
      </view>

      <!-- 对象要求区域：红色按钮 + 标签列表 -->
      <view class="border-t border-gray-100 p-4">
        <!-- 对象要求按钮（红色背景 + 白色文字） -->
        <view class="flex items-center mb-4">
          <view class="px-4 py-2 bg-red-500 text-white rounded-lg">对象要求</view>
        </view>
        <!-- 标签列表：粉色边框 + 文字 -->
        <view class="flex flex-wrap">
          <view class="border border-pink-500 text-pink-500 rounded-full px-4 py-1 mr-2 mb-2">
            <text class="text-[28px]">1980~1985年出生</text>
          </view>
          <view class="border border-pink-500 text-pink-500 rounded-full px-4 py-1 mr-2 mb-2">
            <text class="text-[28px]">150~160cm</text>
          </view>
          <view class="border border-pink-500 text-pink-500 rounded-full px-4 py-1 mr-2 mb-2">
            <text class="text-[28px]">50~55kg</text>
          </view>
          <view class="border border-pink-500 text-pink-500 rounded-full px-4 py-1 mr-2 mb-2">
            <text class="text-[28px]">收入5000以上</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 若需逻辑交互，在此编写
</script>

<style scoped>
/* Tailwind 已通过全局注入样式，无需额外写 CSS */
</style>